<script setup lang="ts">
import { ConsultType } from '@/enum'
import ConsultItem from './ConsultItem.vue'
import { getConsultOrderListAPI } from '@/services'
import { ref } from 'vue'
import type { ConsultOrderItem } from '@/types/consult'

// 接收问诊类型
const props = defineProps<{
  type: ConsultType
}>()

// onMounted(async () => {
//   // 获取问诊记录列表数据
//   const res = await getConsultOrderListAPI({
//     current: 1,
//     pageSize: 10,
//     type: props.type
//   })
//   console.log(res.data.rows)
// })

// loading状态
const loading = ref(false)
// 数据是否加载完毕状态
const finished = ref(false)
let current = 1
// 定义数据列表
const list = ref<ConsultOrderItem[]>([])
const onLoad = async () => {
  // 获取问诊记录列表数据
  const res = await getConsultOrderListAPI({
    current,
    pageSize: 10,
    type: props.type
  })
  //   下滑刷新数据，将数据追加到数据中
  list.value.push(...res.data.rows)
  //   判断数据是否加载完
  if (current >= res.data.pageTotal) {
    finished.value = true
  } else {
    current++ //页码加一
  }
}

// 处理子组件闯过来的删除事件
const handelDelOrder = (id: string) => {
  console.log(id)

  // // 找到删除项
  // list.value = list.value.filter((item) => {
  //   item.id != id
  // })

  // 直接重新拉取
  list.value = []
  finished.value = false
  loading.value = false
  current = 1
  // 重新渲染页面
  onLoad()
}
</script>

<template>
  <div class="consult-list">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <consult-item
        v-for="i in list"
        :key="i.id"
        :item="i"
        @delOrder="handelDelOrder"
      />
    </van-list>
  </div>
</template>

<style lang="scss" scoped>
.consult-list {
  padding: 10px 15px;
}
</style>
